<template>
	<view :class="[lines && `line-${lines}`]">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "jp-ellipsis-text",
		props: {
			lines: {
				type: [Number,String],
			},
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	@for $i from 1 through 5 {
		.line-#{$i} {
			/* #ifdef APP-NVUE */
			// nvue下，可以直接使用lines属性，这是weex特有样式
			lines: $i;
			text-overflow: ellipsis;
			overflow: hidden;
			flex: 1;
			/* #endif */

			/* #ifndef APP-NVUE */
			// vue下，单行和多行显示省略号需要单独处理
			@if $i=='1' {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			@else {
				display: -webkit-box !important;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				-webkit-line-clamp: $i;
				-webkit-box-orient: vertical !important;
			}

			/* #endif */
		}
	}
</style>
